<template>
  <div class="total-info-container">
    <div class="total-info">
      <h3>班级总体信息</h3>
    </div>
    <ul>
      <li>总班级数：{{ totalClasses }}</li>
      <li>总人数：{{ totalStudents }}</li>
      <li>总平均学习时长（小时）：{{ averageStudyTime }}</li>
      <li>总平均完成任务数：{{ averageCompletedTasks }}</li>
      <li>总活跃人数：{{ totalActivePerson }}</li>
      <li>班级最高总学习时长（小时）：{{ topStudyTime }}</li>
      <li>班级最高课程均分：{{ topAverageGrade }}</li>
      <li>班级最低课程均分：{{ lowAverageGrade }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const totalClasses = ref(9424);
const totalStudents = ref(34731);
const averageStudyTime = ref(59.15);
const averageCompletedTasks = ref(32);
const totalActivePerson = ref(6675);
const topStudyTime = ref(569.2);
const topAverageGrade = ref(90);
const lowAverageGrade = ref(41);

const fetchData = async () => {
  totalClasses.value = 9424;
  totalStudents.value = 34731;
  averageStudyTime.value = 59.15;
  averageCompletedTasks.value = 32;
  totalActivePerson.value = 6675;
  topStudyTime.value = 569.2;
  topAverageGrade.value = 90;
  lowAverageGrade.value = 41;
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.total-info-container {
  text-align: center; 
}

.total-info h3 {
  color: black; 
  background-color: transparent; 
  padding: 10px 20px;
  margin: 0 auto; 
  font-family: "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  text-shadow: none; 
  border-bottom: 3px solid #dfe3eb;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  font-size: 18px; 
  font-family: "Georgia", "Times New Roman", "Times", serif; 
  margin: 10px 0;
}
</style>